<template>
  <div id="order_main">

  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      orderDataOption: ''
    }
  },
  methods: {
    async drawTransactionData() {
      this.orderDataOption = ''
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      try {
        const {data: res} = await this.$http.get('/AEC/transactionData')
        let myChart = echarts.init(document.getElementById('order_main'))
        this.orderDataOption = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          legend: {
            data: [new Date().getFullYear() + '年订单量']
          },
          xAxis: [
            {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              min: 0,
              max: 250,
              interval: 50,
              axisLabel: {
                formatter: '{value} 单'
              }
            },

          ],
          series: [
            {
              name: new Date().getFullYear() + '年订单量',
              type: 'bar',
              data: res.content
            },

            {
              type: 'line',
              data: res.content
            }
          ]
        }

        myChart.setOption(this.orderDataOption);
      } catch (error) {
        error.message
      }
      loading.close()

    }
  },
  mounted() {
    this.drawTransactionData()
  }


}
</script>

<style>
#order_main {
  width: 100%;
  height: 93%;
  margin-top: 2%;


}

</style>